<template>
  <div>
    <table class="tab">
      <caption><h1>欢迎光临_vue开发的收银系统_水果店</h1></caption>
      <thead>
        <tr>
          <th>苹果10￥/斤，折扣八折</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span>请输入想买的数量：</span>
            <input type="number">
          </td>
        </tr>
        <tr>
           <td>
            <button>结账买单</button>
          </td>
        </tr>
         <tr>
          <td>
            <span>结账单: 总价: 10￥元</span> &nbsp;
            <span>折价后: 8￥元</span>  &nbsp;
            <span>省了: 2￥元</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.tab {
  /* text-align: center; */
  margin: 0 auto;
  width: 800px;
  height: 200px;
  border: 3px solid #870;
  text-align: center;
}
th,
tr,
td {
  border: 1px solid #000;
  height: 50px;
}
</style>